<script setup lang="ts">
import { computed, getCurrentInstance } from "vue";
import useUserStore from "@/pinia/user";

const curIns = getCurrentInstance()?.proxy;
const userStore = useUserStore();

const options = computed(() => curIns?.$route.meta.breadCrumbList);

const dropdownOptions = computed(() => {
  return [{ name: "退出登录", code: "logout" }];
});

const handleCommand = (command: string) => {
  if (command === "logout") {
    curIns?.$router.push({
      path: "/logout",
    });
  }
};
</script>

<template>
  <div
    class="w-full h-full py-0 px-[10px] box-border bg-white shadow-sm flex flex-row items-center justify-between"
  >
    <div class="left">
      <xt-breadcrumb :options="options" />
    </div>
    <div class="right flex flex-row items-center">
      <xt-dropdown :options="dropdownOptions" @command="handleCommand">
        {{ userStore.userInfo?.name }}
      </xt-dropdown>
    </div>
  </div>
</template>
